import React from 'react'
import { t } from '/imports/i18n'

interface TopErrorBoundaryState {
  hasError: boolean
  localStorage: string
}

export class TopErrorBoundary extends React.Component<any, TopErrorBoundaryState> {
  state: TopErrorBoundaryState = {
    hasError: false,
    localStorage: ''
  }

  render() {
    return this.state.hasError ? this.errorSplash() : this.props.children
  }

  componentDidCatch(error: Error, errorInfo: any) {
    const parsedLocalStorage: Record<string, any> = {}
    for (const [key, value] of Object.entries({ ...localStorage })) {
      try {
        parsedLocalStorage[key] = JSON.parse(value)
      } catch (error: any) {
        parsedLocalStorage[key] = value
      }
    }
    console.error({ error, errorInfo, parsedLocalStorage })
  }

  private selectTextArea(event: React.MouseEvent<HTMLTextAreaElement>) {
    if (event.target !== document.activeElement) {
      event.preventDefault()
      ;(event.target as HTMLTextAreaElement).select()
    }
  }

  private errorSplash() {
    return (
      <div className='ErrorSplash excalidraw'>
        <div className='ErrorSplash-messageContainer'>
          <div className='ErrorSplash-paragraph bigger align-center'>
            {t('errorSplash.headingMain_pre')}
            <button onClick={() => window.location.reload()}>
              {t('errorSplash.headingMain_button')}
            </button>
          </div>
          <div className='ErrorSplash-paragraph align-center'>
            {t('errorSplash.clearCanvasMessage')}
            <button
              onClick={() => {
                try {
                  localStorage.clear()
                  window.location.reload()
                } catch (error: any) {
                  console.error(error)
                }
              }}
            >
              {t('errorSplash.clearCanvasMessage_button')}
            </button>
            <br />
            <div className='smaller'>
              <span role='img' aria-label='warning'>
                ⚠️
              </span>
              {t('errorSplash.clearCanvasCaveat')}
              <span role='img' aria-hidden='true'>
                ⚠️
              </span>
            </div>
          </div>
          <div>
            <div className='ErrorSplash-paragraph'>
              {t('errorSplash.openIssueMessage_pre')}
              <button>{t('errorSplash.openIssueMessage_button')}</button>
              {t('errorSplash.openIssueMessage_post')}
            </div>
            <div className='ErrorSplash-paragraph'>
              <div className='ErrorSplash-details'>
                <label>{t('errorSplash.sceneContent')}</label>
                <textarea
                  rows={5}
                  onPointerDown={this.selectTextArea}
                  readOnly={true}
                  value={this.state.localStorage}
                />
              </div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
